<html>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
// Compare two options within a list by VALUES

function compareOptionValues(a, b) { 
  // Radix 10: for numeric values
  // Radix 36: for alphanumeric values
  var sA = parseInt( a.value, 36 );  
  var sB = parseInt( b.value, 36 );  
  return sA - sB;
}

// Compare two options within a list by TEXT
function compareOptionText(a, b) { 
  // Radix 10: for numeric values
  // Radix 36: for alphanumeric values
  var sA = parseInt( a.text, 36 );  
  var sB = parseInt( b.text, 36 );  
  return sA - sB;
}



// Dual list move function
function moveDualList(srcList, destList, moveAll) {
  // Do nothing if nothing is selected
  if ((srcList.selectedIndex == -1) && (moveAll == false)) {
    return;
  }

  newDestList = new Array(destList.options.length);
  var len = 0;
  for (len = 0; len < destList.options.length; len++ ) {
    if (destList.options[len] != null) {
      newDestList[len] = new Option(destList.options[len].text, 
        destList.options[len].value);
    }
  }

  for (var i = 0; i < srcList.options.length; i++ ) { 
    if (srcList.options[i] != null && 
    (srcList.options[i].selected == true || moveAll)) {
       // Statements to perform if option is selected
       // Incorporate into new list
       newDestList[len] = new Option(srcList.options[i].text, 
         srcList.options[i].value);
       len++;
    }
  }

  // Sort out the new destination list
  //newDestList.sort(compareOptionValues);   // BY VALUES
  //newDestList.sort(compareOptionText);   // BY TEXT

  // Populate the destination with the items from the new array
  for (var j = 0; j < newDestList.length; j++) {
    if (newDestList[j] != null ) {
      destList.options[j] = newDestList[j];
    }
  }

  // Erase source list selected elements
  for(var i = srcList.options.length - 1; i >= 0; i--) { 
    if (srcList.options[i] != null && 
    (srcList.options[i].selected == true || moveAll)) {
       // Erase Source
       //srcList.options[i].value = "";
       //srcList.options[i].text  = "";
       srcList.options[i]       = null;
    }
  }
} // End of moveDualList()

//  End -->

</script>
</HEAD>

<!-- STEP TWO: Copy this code into the BODY of your HTML document  -->
<BODY>
<div align="center"><center>

<!-- TEST DUAL LIST -->
<form ACTION="" METHOD="POST" name="myForm">
<table border="0">
<tr>
  <td>
    <!-- Multiple Select List with 20 rows size and 70 pixels wide -->
    <!-- Using   for SPACING and alignment -->
    <select multiple size="20" style="width:70" name="listLeft">
      <option value="1">jack wang</option>
      <option value="2">kevin zhang</option>
      <option value="3">sam xia</option>
    </select>
  </td>
  <td><NOBR>   
    <input type="button" onclick="moveDualList(this.form.listLeft, this.form.listRight, false)"  
    name="Add" value="Add >>"><BR>
    <NOBR>       
    <input type="button" onclick="moveDualList(this.form.listRight, this.form.listLeft, false)"  
    name="Remove" value="Remove <<"><BR>
    <NOBR>       
    <input type="button" onclick="moveDualList(this.form.listLeft, this.form.listRight, true)"  
    name="Add All" value="Add All >>"><BR>
    <NOBR>       
    <input type="button" onclick="moveDualList(this.form.listRight, this.form.listLeft, true)"  
    name="Remove All"  value="Romve All <<"><BR>
    </NOBR>
  </td>
  <td>
    <select multiple size="20" style="width:70" name="listRight">
      <option value="4">kai xu</option>
      <option value="5">haibo fan</option>
      <option value="6">lili chen</option>
    </select>
  </td>
</tr>
</table>
</form>
</center></div>
<p><center>
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>
</html>
<!-- Script Size:  5.98 KB -->